<template>
  <div class="order-tab">
    <div class="order-tab-list"
         @click="changeValue(index)"
         v-for="(item, index) in tabList">
      <div class="text"
           :style="getStyle(value, index)">{{item}}</div>

    </div>
  </div>
</template>

<script>
import mixins from '@/mixins'
export default {
  name: 'order-tab',
  data () {
    return {
      tabList: ['全部', '待付款', '待发货', '待收货']
    }
  },
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  mixins: [mixins],
  methods: {
    getStyle (value, index) {
      let isSelected = value === index
      return {
        color: isSelected ? 'rgba(227,20,54,1)' : 'RGBA(0, 0, 0, 1)',
        borderBottomColor: isSelected ? 'rgba(227,20,54,1)' : 'white'
      }
    },
    changeValue (index) {
      this.$emit('input', index)
    }
  },
  mounted () {
  },
  components: {
  }
}
</script>

<style lang="stylus" scoped>
.order-tab {
  display: flex;
  justify-content: space-around;
  padding-top: 31px;
  align-items: center;

  .order-tab-list {
    font-size: 28px;

    .text {
      padding-bottom: 31px;
      border-bottom: 4px solid white;
    }
  }
}
</style>
